<template>
	
	<div id="personal">
		
		<div id="pheader">
			<img src="../../assets/img/padd.png" alt="" />
			<div>我</div>
			<img src="../../assets/img/pren.png" alt="" />
			<img src="../../assets/img/shezhi.png" alt="" @click="changes" />
		</div>
		
		<div class="uncol" v-show="status">
			<h1>开始准备好好吃饭</h1>
			<div>好好吃饭用心生活，比什么都幸福，保存你最喜欢的美食，分享你的三餐，关注厨房里的达人。</div>
			<span @click="change">登录</span>
			<span @click="changer">手机注册</span>
		</div>
		
		<div id="ppersonal" v-show="!status">
			<div id="intro">
				<div class="pinfo">
					<span>{{username}}</span>
					<span>添加厨房必需品</span>
					<span><img src="../../assets/img/dian.png" alt="" /></span>
					<span>
						<dl>
							<dt>0</dt>
							<dd>关注</dd>
						</dl>
						<dl>
							<dt>0</dt>
							<dd>粉丝</dd>
						</dl>
					</span>
				</div>
				<div class="ppic">
					<p>
						<span>有头像<br/>更礼貌</span>
					</p>
					<p>编辑个人资料</p>
				</div>
			</div>
			<div id="pmenu">
				<ul>
					<li>
						<div class="item">
							<router-link to="./collection">
								<div class="pictrue"></div>
								<div>我的收藏</div>
							</router-link>
						</div>
						
					</li>
					<li>
						<div class="item">
							<a href="javascript:;">
							<div class="pictrue"></div>
							<div>订单</div>
							</a>
						</div>
						
					</li>
					<li>
						<div class="item">
							<a href="javascript:;">
							<div class="pictrue"></div>
							<div>优惠</div>
							</a>
						</div>
					</li>
					<li>
						<div class="item">
							<a href="javascript:;">
							<div class="pictrue"></div>
							<div>统计</div>
							</a>
						</div>
					</li>
				</ul>
			</div>
			<div id="menu1">
				<ul>
					<li>菜谱</li>
					<li>作品</li>
				</ul>
			</div>
			<div class="ptext">
				<p>创建菜谱的人是厨房里的天使</p>
				<p>开始创建第一道</p>
			</div>
		</div>
		
		
	</div>
	
</template>

<script>
	export default {
		methods: {
			change(){
				this.$store.commit('changeLoginState');
			},
			changes(){
				this.$store.commit('changeSettingState');
			},
			changer(){
				this.$store.commit('changeRegState');
			}
		},
		computed: {
			status(){
				return this.$store.state.status;
			},
			username(){
				console.log(this.$store.state.userInfo);
				return this.$store.state.userInfo;
			}
		}
	}
</script>

<style scoped>
	
		
	#personal{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	
	#pheader{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 1.711538rem;
		display: flex;
		align-items: center;
	}
	#pheader img:nth-child(1){
		margin-left:0.557692rem;
		width:0.625rem;
		height:0.586538rem;
	}
	#pheader div{
		flex-grow: 1;
		font-size: 0.384615rem;
		text-align: center;
		margin-left:1.730769rem;
	}
	#pheader :nth-child(3){
		margin-right:1.105769rem;
		width:0.64423rem;
		height:0.576923rem;
	}
	#pheader :nth-child(4){
		margin-right:0.586538rem;
		width:0.567307rem;
		height:0.596153rem;
	}
	.uncol{
		position: absolute;
		left: 0;
		right: 0;
		top:1.865384rem;
		padding-top:2.115384rem;
	}
	.uncol h1{
		font-size: 0.634615rem;
		font-weight: normal;
		text-align: center;
		margin-bottom:1.5rem;
	}
	.uncol div{
		width:70%;
		margin:auto;
		font-size: 0.298076rem;
		margin-bottom:1.25rem;
		text-align: center;
	}
	.uncol span{
		display: block;
		width:9.230769rem;
		height:1.153846rem;
		background: #6fbd53;
		text-align: center;
		margin: auto;
		font-size: 0.355769rem;
		color:white;
		line-height: 1.153846rem;
		margin-bottom:0.576923rem;
	}
	.uncol :nth-child(4){
		background: #f96650;
		margin-bottom:1.307692rem;
	}
	.uncol p{
		font-size: 0.365384rem;
		color:#f96650;
		text-align: center;
	}
	#ppersonal{
		position: absolute;
		left: 0;
		right: 0;
		top:1.711538rem;
		bottom:0;
		overflow: auto;
		/*height:100%;*/
	}
	#intro{
		height:5.14423rem;
		border-bottom:solid 0.009615rem #eaeae0;
		display: flex;
	}
	#intro div{
		width:50%;
		margin-left:0.480769rem;
	}
	.pinfo{
		flex-grow: 1;
		margin-top:0.480769rem;
	}
	#intro div dl{
		display: inline-block;
		font-size: 0.25rem;
	}
	#intro div dl:nth-child(1){
		margin-right:0.615384rem;
	}
	#intro div:nth-child(1) span{
		display: block;
	}
	#intro span img{
		width:0.423076rem;
		height:0.105769rem;
		margin-bottom:0.76923rem;
		margin-top:0.336538rem;
	}
	#intro div:nth-child(1) span:nth-child(1){
		margin-bottom:0.76923rem;
		font-size:0.480769rem;
		font-weight: bold;
	}
	#intro div:nth-child(1) span:nth-child(2){
		font-size:0.230769rem;
		color:#f96650;
	}
	#intro .ppic{
		margin-right:0.480769rem;
		margin-top:0.480769rem;
	}
	#intro .ppic p:nth-child(1){
		border-radius: 50%;
		width:2.692307rem;
		height:2.692307rem;
		background: #aaa;
		margin:auto;
		font-size: 0.480769rem;
		color:white;
		text-align: center;
		font-weight: bold;
		display: flex;
		align-items: center;
	}
	#intro .ppic p:nth-child(1) span{
		width:2.692307rem;
		display: inline-block;
	}
	#intro .ppic p:nth-child(2){
		font-size: 0.298076rem;
		color:#f96e5a;
		text-align: center;
		margin-top:0.576923rem;
	}
	#pmenu{
		height:2.596153rem;
		border-bottom:solid 0.288461rem #fafaf8;
		font-size: 0.3125rem;
		color:#777;
	}
	#pmenu ul{
		height:2.596153rem;
		display: flex;
		align-items: center;
	}
	#pmenu ul li{
		width:25%;
	    text-align: center;
	    padding-top: 0.203125rem;
	}
	#pmenu a{
		color:#383835;
	}
	#pmenu ul li .pictrue{
		width:0.78125rem;
		height:0.78125rem;
		background:url("../../assets/img/shoucang.png") no-repeat center center;
		background-size: 90%;
		margin:auto;
		margin-bottom:0.288461rem;
	}
	#pmenu ul li:nth-child(2) .pictrue{
		background:url("../../assets/img/order.png") no-repeat center center;
		background-size: 90%;
	}
	#pmenu ul li:nth-child(3) .pictrue{
		background:url("../../assets/img/youhui.png") no-repeat center center;
		background-size:90%;
	}
	#pmenu ul li:nth-child(4) .pictrue{
		background:url("../../assets/img/tongji.png") no-repeat center center;
		background-size:90%;
	}
	#menu1{
		height:1.384615rem;
	}
	#menu1 ul{
		height:1.384615rem;
		display: flex;
		align-items: center;
	}
	#menu1 ul li{
		height:1.384615rem;
		width:50%;
		text-align: center;
		font-size: 0.346153rem;
		line-height: 1.384615rem;
	}
	#menu1 ul li:nth-child(1){ 
		border-bottom:solid 0.057692rem #f96650;
		color:#f96650;
	}
	#ppersonal .ptext p:nth-child(1) {
		font-size:0.403846rem;
		margin-top:1.903846rem;
		text-align: center;
	}
	#ppersonal .ptext p:nth-child(2) {
		font-size:0.375rem;
		color:#fa7460;
		margin-top:1.442307rem;
		text-align: center;
	}
</style>